<template>
  <su-page>
    <su-body padding="0 15px">
      <u--form labelPosition="top" :model="formData" :rules="rules" ref="form1">
        <u-form-item labelWidth="100px" label="通知名称" prop="title" borderBottom ref="item1">
          <u--input v-model="formData.title" placeholder="请输入通知名称" border="none"></u--input>
        </u-form-item>
        <u-form-item labelWidth="100px" label="通知人员" prop="spr" borderBottom ref="item1">
          <su-select :options="sprOptions" placeholder="请选择通知人员" v-model="formData.spr"></su-select>
        </u-form-item>
        <u-form-item labelWidth="100px" label="备注" prop="yjjy" borderBottom ref="item1">
          <u--textarea v-model="formData.yjjy" placeholder="请输入备注"  border="none"></u--textarea>
        </u-form-item>
        <u-form-item labelWidth="100px" label="附件" prop="files" borderBottom ref="item1">
          <su-uploader v-model="formData.files"></su-uploader>
        </u-form-item>
      </u--form>
      <su-fixed-footer transparent>
        <u-button type="default" size="large" :loading="loading" text="取消" @click="submitForm"></u-button>
        <u-button type="primary" size="large" :loading="loading" text="提交" @click="submitForm"></u-button>
      </su-fixed-footer>
    </su-body>
  </su-page>
</template>

<script>
  /**
   * @description 通知发送
   * @date 2022-03-15
   * @version v1.0.1
   * @author gf
   */
  import {
    register
  } from '@/common/api.js'
  export default {
    data() {
      return {
        loading: false,
        sprOptions: [{
            label: '灵山湾文化区安监员',
            value: '1111'
          },
          {
            label: '青岛市经济技术开发区安监员',
            value: '2222'
          },
          {
            label: '马凯',
            value: '3333'
          },
          {
            label: '董家口经济区安监员',
            value: '555'
          },
          {
            label: '青岛国际经济合作区安监员',
            value: '6'
          },
          {
            label: '古镇口军民融合创新示范区安监员',
            value: '7'
          },
        ],
        // form表单数据对象	
        formData: {
          title: '',
          spr: '',
          yjjy: '',
          files:[]
        },
        // 表单校验规则
        rules: {
          title: [{
            required: true,
            message: '请填写通知名称',
            trigger: ['change', 'blur'],
          }],
          spr: {
            required: true,
            validator: (rule, value, callback) => {
              return value !== '';
            },
            message: '请选择通知人员',
            trigger: ['change'],
          },
        }
      }
    },
    onLoad() {
      this.$refs.form1.setRules(this.rules)
    },
    methods: {
      // 提交表单
      submitForm() {
        this.$refs.form1.validate().then(ok => {
          console.log(ok)
          if (ok) {
            this.loading = true
            setTimeout(() => {
              this.loading = false
              this.$u.toast('保存成功')
              this.$u.route({
                type: 'back'
              })
            }, 500)
          }
        }).catch(err => {
          return
        })
      }
    }
  }
</script>

<style lang="scss">
</style>
